<template>
    <Row :gutter="30">
        <Card style="margin:0 0 20px 0px">
            <Row class="form-row">
                <Form :model="filters" :rules="rule" label-position="right" :label-width="90" inline>
                    <FormItem label="小区名称">
                        <Select v-model="filters.housingId" placeholder="请选择小区" filterable clearable style="width:250px" :clearable="true">
                            <Option v-for="item in housingList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" size="large" icon="md-search" @click="handleQuery()">
                            查询
                        </Button>
                    </FormItem>
                </Form>
                <template>
                    <Button type="info" icon="md-add" @click="handleAdd()" style="margin:5px 5px">
                        新增
                    </Button>
                </template>
            </Row>
            <Table stripe border :loading="tableLoading" :columns="tableColumn" :data="tableData"
                   ref="table">
                <!--操作-->
                <template slot="action" slot-scope="props">
                    <Button size="small" type="warning" @click="handleAdd(props.id)" style="margin-top:5px;">修改
                    </Button>
                    <Poptip confirm title="确定删除?" @on-ok="deleteLocker(props.id)" style="margin-top:5px;">
                        <Button size="small" type="info">删除</Button>
                    </Poptip>
                    <Button size="small" type="primary" @click="lockerInfo(props.id)" style="margin-top:5px;">详情
                    </Button>
                </template>
            </Table>
            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </Card>

        <Modal v-model="formVisible" :mask-closable="false" :closable="false" :title="modal && modal.id ? '修改' : '新增'" width="900">
            <Form :model="modal" :rules="rule" ref="form2" label-position="right" :label-width="110" class="myOpenFrom">
                <FormItem label="小区" prop="housingId">
                    <Select v-model="modal.housingId" clearable placeholder="请选择小区" size="large" style="width:100%" :clearable="true">
                        <Option v-for="item in housingList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="快递柜名称" prop="lockerName">
                    <Input v-model="modal.lockerName" placeholder="快递柜名称" size="large" required="true"/>
                </FormItem>
                <FormItem label="快递柜地址" prop="addres">
                    <Input v-model="modal.addres" placeholder="快递柜地址" size="large" required="true"/>
                </FormItem>
                <FormItem label="格子数量" prop="latticeTotal">
                    <Input v-model="modal.latticeTotal" placeholder="格子数量" size="large" required="true"/>
                </FormItem>
                <FormItem label="IP地址" prop="ip">
                    <Input v-model="modal.ip" placeholder="IP地址" size="large" required="true"/>
                </FormItem>
            </Form>

            <div slot="footer">
                <Button type="text" size="large" @click="onCancel">取消</Button>
                <Button type="primary" size="large" @click="handleSubmit">确定</Button>
            </div>
        </Modal>

        <Modal v-model="formModalVisible" :mask-closable="false" :closable="false" title="快递柜详情" width="900">

            <Table stripe border :loading="tableLoading" :columns="latticeColumn" :data="latticeData"
                   ref="latticeTable">
            </Table>
            <div slot="footer">
                <Button type="primary" size="large" @click="onCancel">确定</Button>
            </div>
        </Modal>
    </Row>
</template>
<script>
    //校验规则
    import baseURL from '_conf/url'

    const rules = {
        housingId: [{
                required: true,
                message: "请选择小区",
            }],
        lockerCode: [{
            required: true,
            message: "请输入快递柜编码",
        }],
        lockerName: [{
            required: true,
            message: "请输入快递柜名称",
        }],
        addres: [{
            required: true,
            message: "请输入快递柜地址",
        }],
        latticeTotal: [{
            required: true,
            message: "请输入格子数量",
        }],
        ip: [{
            required: true,
            message: "请输入快递柜IP",
        }],
    };
    //加载数据
    let loadData = function () {
        if (this.tableLoading) return;
        this.tableLoading = true;
        let params = this.filters;
        params.pageNum = this.pageNum;
        params.pageSize = this.pageSize;
        //与后台交换数据
        this.postRequest("/api/boxLocker/loadData", params).then(res => {
            console.log(res);
            this.tableLoading = false;
            if (res.code == 20000) {
                this.tableData = res.data.list;
                this.pageTotal = res.data.total;
            } else {
                this.tableData = [];
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    }
    //加载所有小区
    let housing = function () {
        this.postRequest("/api/kdStorage/queryHousing").then(res => {
            this.housingList = res;
        });
    }
    //查询
    let handleQuery = function(){
        this.loadData()
    }
    //打开新增修改页面
    let handleAdd = function (id) {
        this.modal = {};
        if (id) {
            let url = "/api/boxLocker/openModel";
            let params = {};
            params.id = id;
            this.postRequest(url, params).then(res => {
                console.log(res)
                if(res.code == 20000){
                    this.modal = res.data
                }
            })
        }
        this.formVisible = true
    }
    //删除快递柜
    let deleteLocker = function (id) {
        this.getRequest("/api/boxLocker/deleteLocker?id="+id).then(res => {
            if (res.code == 20000) {
                this.formLoading = false;
                this.formVisible = false;
                this.$Message.success("删除成功！");
                this.loadData();
            } else {
                this.formLoading = false;
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    }
    //查看快递柜详情
    let lockerInfo = function (id) {
        this.formModalVisible = true
        this.getRequest("/api/boxLocker/lockerInfo?id="+id).then(res => {
            console.log(res)
            this.tableLoading = false;
            if (res.code == 20000) {
                this.latticeData = res.data;
            } else {
                this.latticeData = [];
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    }
    //报备格子损坏
    let damage = function(id){
        alert(id)
    }
    //新增、修改确定按钮
    let handleSubmit = function () {
        this.$refs["form2"].validate(valid => {
            if (valid) {
                this.formLoading = true;
                this.save();
            }
        });
    }
    //保存
    let save = function () {
        let parms = this.modal;
        this.postRequest("/api/boxLocker/saveOrUpdate", parms).then(res => {
            this.$refs["form2"].resetFields();
            this.tableLoading = false;
            if (res.code == 20000) {
                this.formLoading = false;
                this.formVisible = false;
                this.$Message.success("保存成功！");
                this.loadData();
            } else {
                this.formLoading = false;
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    }
    //新增、修改取消按钮
    let onCancel = function () {
        this.$refs["form2"].resetFields();
        this.formVisible = false;
        this.formModalVisible = false;
    }

    //修改状态
    let openorclose = function(status,id) {
        if(status==1){
            status=2;
        }else{
            status=1;
        }
        let params={};
        params.id=id;
        params.status=status;
        this.postRequest("/api/boxLocker/updateStatus", params).then(res => {
            if (res.code == 20000) {
                this.loadData();
                this.$Message.success("状态修改成功！");
            } else {
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    };
    export default {
        data() {
            //收件表格
            return {
                //验证规则
                rule: rules,
                Tier: 0,
                Num: 0,
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                filters: {},
                modal: {},
                housingList: [],
                //新增修改隐藏
                formVisible: false,
                formModalVisible: false,
                //数据表格隐藏状态
                tableLoading: false,
                tableData: [],
                tableColumn: [
                    {
                        title: "小区名称",
                        key: "housingName"
                    },
                    {
                        title: "快递柜编号",
                        key: "lockerCode"
                    },
                    {
                        title: "快递柜名称",
                        key: "lockerName"
                    },
                    {
                        title: "快递柜地址",
                        key: "addres"
                    },
                    {
                        title: "格子数量",
                        key: "latticeTotal"
                    },
                    {
                        title: "ip地址",
                        key: "ip"
                    },
                    {
                        title: "创建时间",
                        key: "createdAt"
                    },
                    {
                        title: "状态",
                        key: "status",
                        align: "center",
                        render: (h, params) => {
                            let self = this;
                            const switchList = [
                                {
                                    slot: "open",
                                    name: "使用"
                                },
                                {
                                    slot: "close",
                                    name: "停用"
                                }
                            ];
                            return h("div", [
                                h(
                                    "i-switch",
                                    {
                                        //数据库1是启用，-1是禁用
                                        props: {
                                            size: "large",
                                            type: "primary",
                                            value: params.row.status === 1 //控制开关的打开或关闭状态，官网文档属性是value
                                        },
                                        style: {
                                            marginRight: "5px"
                                        },
                                        on: {
                                            "on-change": value => {
                                                //触发事件是on-change,用双引号括起来,参数value是回调值，并没有使用到
                                                this.openorclose(params.row.status,params.row.id); //params.index是拿到table的行序列，可以取到对应的表格值
                                            }
                                        }
                                    },
                                    switchList.map(item => {
                                        return h(
                                            "span",
                                            {
                                                slot: item.slot
                                            },
                                            item.name
                                        );
                                    })
                                )
                            ]);
                        }
                    },
                    {
                        key: "action",
                        title: "操作",
                        align: "center",
                        width: 70,
                        render: (h, params) => {
                            return h(
                                "div",
                                this.$refs.table.$scopedSlots.action({
                                    id: params.row.id,
                                })
                            );
                        }
                    }
                ],
                latticeData: [],
                latticeColumn: [
                    {
                        title: "编号",
                        key: "latticeNumber"
                    },
                    {
                        title: "状态",
                        key: "status",
                        render: (h, params) => {
                            let _this = this;
                            let texts = "";
                            if (params.row.status == 1) {
                                texts = "未使用";
                            } else if (params.row.roleId == 2) {
                                texts = "使用中";
                            } else if (params.row.roleId == 3) {
                                texts = "已损坏";
                            }
                            return h(
                                "div",
                                {
                                    props: {}
                                },
                                texts
                            );
                        }
                    },
                ]
            };
        },
        created: function () {
            this.housing();
            this.loadData();
        },
        methods: {
            loadData,
            housing,
            handleQuery,
            handleAdd,
            deleteLocker,
            lockerInfo,
            handleSubmit,
            save,
            onCancel,
            openorclose,
            damage,
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
        }
    };
</script>
